/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


/*******************************************************************************
        Reset styles
*******************************************************************************/

input[type="button"]::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
	margin-top:-2px; 
	margin-bottom: -2px; 
}

/*******************************************************************************
        Text style
*******************************************************************************/ 
p {
    font-size: 12px;
}

blockquote {
    border-color: #ccc;
    border-style: solid;
    border-width: 0 0 0 5px;
    font-style: italic;
    padding: 2px 8px 2px 20px;
}

.text-base
{
    color: @textColor;
    font-size: 12px;
    font-weight: normal;
}
.describe-text
{
    color: @textColorGrayDark;
    font-size: 12px;
}
.text-medium
{
    color: @textColor;
    font-size: 11px;
    font-weight: normal;
}
.text-medium-describe
{
    color: @textColorGrayDark;
    font-size: 11px;
} 

.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.disable { cursor:default !important;}

/*******************************************************************************
    Text colors
*******************************************************************************/

.red-text
{
    color: @textColorRed !important;
}
.gray-text
{
    color: @textColorGrayDark !important;
}
.blue-text
{
    color: @linkColor !important;
}

/*******************************************************************************
    </blockUI>
*******************************************************************************/
.popupContainerClass,
.mainContainerClass .popupContainerClass {
    .boxShadow();
    .borderRadius(6px);
}

/*******************************************************************************
    New label Banner
*******************************************************************************/
.new-label-banner {
    color: @textColor;
    padding: 2px 8px;
    margin: 0 0 0 8px;
    .borderRadius();
    .bg-is-new-without-hover();
}

/*******************************************************************************
    New in th left menu
*******************************************************************************/
.new-label-menu {
    color: @defaultButtonTextColor;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px;
    margin: 0 0 0 8px;
    max-width: 40px;
    overflow: hidden;
    .borderRadius();
    .bg-is-new();
}

.header-back-link {
    &,
    &:hover,
    &:active,
    &:visited {
        .bg-button-default();
        .border-button-default ();
        .borderRadius();
        float: left;
        margin: 3px 8px 0 0;
        padding: 3px 5px 4px 4px;
        text-decoration: none;
    }
    &:after{
        background: transparent url('@{img-change-url}up.svg') 0 0 no-repeat;
        content: "";
        display: block;
        height: 12px;
        width: 12px;
        background-position: 50% 50%;
    }
}
/*******************************************************************************
   Info Panel
*******************************************************************************/
.info-box {
    margin: 0 0 20px;
    padding: 9px 12px 12px 40px;

    &.excl {
        background: url('@{imagesBaseUrl}toast_icon01.png') no-repeat 9px 9px @info-box-excl-bg;
        border: @info-box-excl-bor;
    }

    .btn-close {
        border: 0;
        float: right;
        margin: 3px 0 0 15px;
        cursor: pointer;
        width: 8px;
        height: 8px;
        background: @info-box-excl-close no-repeat;
    }
}


/*******************************************************************************
           Action menu
*******************************************************************************/

.header-with-menu {
    color: @textColor;
    font-size: 24px;
    max-width: 900px;
    overflow: hidden;
    line-height: 30px;
}

.header-status {
    color: #83888D;
    float: left;
    font-size: 20px;
    margin: 2px 0 0 4px;
}
.follow-status {
    cursor: pointer;
    display:inline-block;
    height: 24px;
    margin: 0 0 0 3px;
    text-decoration: none;
    width: 24px;

    &.subscribed {
        background: url('images/svg/projects/feedblack.svg') no-repeat;
        background-size:100% 100%;
        background-position: 0 3px;
    }
    &.unsubscribed {
        background: url('images/svg/projects/feedblackgray.svg') no-repeat;
        background-size:100% 100%;
        background-position: 0 3px;
    }
}

.menu-small {
    border: 3px solid @entity-menu-color;
    .borderRadius(14px);
    cursor: pointer;
    display: inline-block;
    height: 14px;
    width: 14px;
    margin:5px 0 0 7px;
    vertical-align: top;
    position: relative;
    &:after {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid @entity-menu-color;
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4px;
            margin-top: -2px;
        }
}

.menu-small:hover,
.header-with-menu:hover .menu-small,
.menu-small.active,
.menu-small.active:hover,
.header-with-menu:hover .menu-small.active,
.header-with-menu:hover + .menu-small {
    border-color: @entity-menu-active-color;

    &:after {
        border-top-color: @entity-menu-active-color;
    }
}

.UserInfoBlock
{
    margin-right: 10px;
    overflow: hidden;
    padding: 10px 0pt 10px 10px;
}
.statusSubscribe
{
    color: #666;
    font-size: 12px;
    margin: 5px 0 15px 2px;
}

/*******************************************************************************
  Titles of opened/closed blocks
*******************************************************************************/
.headerToggleBlock .openBlockLink,
.headerToggleBlock .closeBlockLink {
    border-bottom: 1px dotted @textColorGrayDark;
    color: @textColorGrayDark;
    cursor: pointer;
    font-size: 11px;
    font-weight: normal;
    margin-bottom: 3px;
    vertical-align: middle;
}

.headerToggleBlock .openBlockLink,
.headerToggleBlock.open .closeBlockLink{
    display: inline-block;
}
.headerToggleBlock .closeBlockLink,
.headerToggleBlock.open .openBlockLink{
    display: none;
}
.headerToggleBlock .headerToggle {
    cursor: pointer;
    margin: 0 12px 0 0 !important;
    min-height: 18px;   
    text-align: left;
}


/*******************************************************************************
    Header menu elements for group operations
*******************************************************************************/
.on-top-link, 
.on-top-link:visited,
.on-top-link:hover, 
.on-top-link:active {
    cursor: pointer;
    color: @textColorBlackDark;
    display: inline-block;
    font-size: 11px;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
}
.on-top-link:hover {
    color: @textColorBlackDark;    
    text-decoration: underline;
}
.on-top-link:before {
    content: " ";
    display: block;
    position: absolute;
    left: -11px;
    top: 50%;
    margin-top: 0;
    width: 5px;
    height: 4px;
    background-color: #666;
}
.on-top-link:after {
    border-left: 5px solid transparent;
    border-bottom: 5px solid #666;
    border-right: 6px solid transparent;
    content: "";
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: -14px;
}
.menu-action-on-top,
.menu-action-simple-pagenav,
.menu-action-checked-count {
    display: none;
    float: right;
}
.menu-action-on-top {
    font-size: 11px;
    min-height: 20px;
    margin-left: 15px;
    padding: 3px 5px 0 7px;
}

.menu-action-simple-pagenav {
    div {
        margin-left: 15px;
        padding: 0 5px 0 7px;
    }
    a, 
    a:active, 
    a:visited {
        font-size: 11px;
    }
    a.pagerPrevButtonCSSClass
    {
        margin-right: 0;
    }
    a.pagerNextButtonCSSClass
    {
        margin-left: 0;
    }
}
.menu-action-checked-count {
    display: none;
    font-size: 11px;
    margin-left: 15px;
    padding: 3px 5px 0 7px;

    &.minimize {
        margin-left: 0px;
    }
}
.menu-action-on-close {
    padding-left: 8px;
    margin-top: -10px;
}
.on-close-link,
.on-close-link:hover,
.on-close-link:visited,
.on-close-link:active {
    cursor: pointer;
    color: @textColorBlackDark;
    font-size: 28px;
    text-decoration: none;
}

.header-menu-spacer
{
    display: none;
    height: 21px;
    padding: 9px 0;
}
.grey-phone {
    &, 
    &:active, 
    &:hover, 
    &:focus {
        .bg-button-grey-phone();
        color: @greyPhoneButtonTextColor;
    }
}
body.media-width-0-1200 {
    .menu-action-on-top {
        background-color: @menu-selected-bg;
        bottom: 0;
        right: 24px;
        padding: 5px 8px 0 21px;
        position: fixed;
    }
}
/*******************************************************************************
        Switcher Hide/Show
*******************************************************************************/       
.tabs-section {
    margin-bottom: 13px;
    margin-top: 24px;
}

/*------Common style for toggle button--------*/
.toggle-button {
    border-bottom: 1px dotted @textColorGrayDark;
    color: @textColorGrayDark;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    margin: 0 0 3px 12px;
    vertical-align: middle;
}

/*******************************************************************************
        Menu Icon in Lists
*******************************************************************************/

.with-entity-menu {
    &:hover .entity-menu,
    .entity-menu.active {
        border-color: @entity-menu-active-color;

        &:after {
            border-top-color: @entity-menu-active-color;
        }
    }

    .entity-menu {
        border: 3px solid @entity-menu-color;
        .borderRadius(14px);
        cursor: pointer;
        display: block;
        height: 14px;
        width: 14px;
        margin: auto;
        padding: 0;
        position: relative;

        &:after {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid @entity-menu-color;
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4px;
            margin-top: -2px;
        }
    }
}


.loading-block {
    margin-top:16px;

    span {
        background: url("images/@{loader-gif-16}") no-repeat left center transparent;
        padding-left: 20px;
    }
}
.loader16 {
    background: url("images/@{loader-gif-16}") no-repeat left center transparent;
    position: absolute;
    height: 16px;
    width: 16px;
}

/*******************************************************************************
       Icons for editing
*******************************************************************************/
.pencil {
    background: url('images/svg/documents/@{pencil-gray}');
    cursor: pointer;
    height: 16px;
    width: 16px;

    &.active {
        background: url('images/svg/documents/pencilblue.svg');
    }
}

.convert-action {
    background: url('images/svg/documents/rotategray.svg');
    cursor: pointer;   
    height: 16px;
    width: 16px;

    &.active {
        background: url('images/svg/documents/rotateblue.svg');
    }
}

.fillform-action {
    background: url('images/svg/documents/fillformsgray.svg');
    cursor: pointer;
    height: 16px;
    width: 16px;

    &.active {
        background: url('images/svg/documents/fillformsblue.svg');
    }
}

.template-action {
    background: url('images/svg/documents/templategray.svg');
    cursor: pointer;   
    height: 16px;
    width: 16px;

    &.active {
        background: url('images/svg/documents/templateblue.svg');
    }
}

.file-lock {
    background: url('images/svg/documents/locksmallcolored.svg') no-repeat 0 0 transparent;
    cursor: pointer;
    height: 16px;
    width: 16px;
    background-size:16px;
}

.favorite {
    background: url('images/svg/documents/favorite.svg') no-repeat 0 0 transparent;
    cursor: pointer;
    height: 16px;
    width: 16px;
    background-size:16px;
}
/*******************************************************************************
    Other icons
*******************************************************************************/

.refresh-icon {
    display: block;
    height: 16px;
    width: 16px;
    background: url('@{img-change-url}rotate.svg') center no-repeat;
}
.search-icon {
    display: block;
    height: 16px;
    width: 16px;
    background: url("@{imagesBaseUrl}search_16.png") center no-repeat;
}

/*******************************************************************************
        Reset icon
*******************************************************************************/

.reset-icon {
    background: url("@{imagesBaseUrl}remove_16.png") no-repeat scroll top center transparent;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    margin-left: 5px;
    vertical-align: middle;
    width: 16px;
    
    &:hover {
        background-position: bottom center;
    }
}
.clear-icon {
    background: url("@{imagesBaseUrl}clear_16.png") no-repeat scroll top center transparent;
    cursor: pointer;
    height: 16px;
    width: 16px;
    
    &:hover {
        background-position: bottom center;
    }
}
/*******************************************************************************
    Main header color
*******************************************************************************/

.main-header-color {
    background-color: @bg-header;
}
.main-header-color-hover {
    background-color: @bg-header;
    .opacityStyle(90);
}

/*******************************************************************************
    Arrow icons
*******************************************************************************/
.expander-icon {
    border-left: 4px solid #696969;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    display: inline-block;

    &.open {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #696969;
    }
}

/*************************************************************
    PopupBox 
*************************************************************/

.popupbox-border {
    border: 1px solid #d1d1d1;
    .borderRadius(4px);
    .boxShadow();
}
.popupbox-loader {
    padding: 16px;
}


/*************************************************************
    Loader
*************************************************************/
.loader-middle {
    background-image: url("../default/images/loader_16_static.png");
    display: none;
    width: 16px;
    height: 16px;
    padding: 0;
    .img-rotate;
}
.loader-big {
    background-image: url("../default/images/loader_24_static.png");
    display: none;
    width: 24px;
    height: 24px;
    padding: 0;
    .img-rotate;
}